<template>
  <div>
    <van-search 
      v-model="value" 
      show-action
      @cancel="onCancel"
      placeholder="请输入搜索关键词"
    />
    <van-list>
      <van-cell v-for="data in computedCinemaList" :key="data.cinemaId">
        <div>{{data.name}}</div>
        <div class="address">{{data.address}}</div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      value: ''
    }
  },
  computed: {
    ...mapState({
      cinemaList: state => state.cinema.cinemaList
    }),
    computedCinemaList() {
      if(!this.value) return []
      return this.cinemaList.filter(item => item.name.toUpperCase().includes(this.value.toUpperCase()) || item.address.toUpperCase().includes(this.value.toUpperCase()) )
    }
  },
  methods: {
    onCancel() {
      this.$router.replace('/cinema')
    }
  }
}
</script>
<style lang="less" scoped>
.address {
  font-size: 12px;
  color: gray;
}
</style>